<template>
	<div>

	</div>
</template>

<script>
//https://codepen.io/Chokcoco/pen/OJgdRPm
export default {
  name: "neon-loading",
  data() {
    return {
      prop1: false,
      prop2: ''
    }
  },
  methods: {
      fun1(){
        
      }
  }
}
</script>

<style lang="scss" scoped>

body, html {
    width: 100%;
    height: 100%;
    display: flex;
    background: #000;
}

div {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    
    --colorA: #b78eff;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 50%;
        border-top: 10px solid #fff;
        filter: 
            drop-shadow(0 0 2px var(--colorA))
            drop-shadow(0 0 5px var(--colorA))
            drop-shadow(0 0 10px var(--colorA))
            drop-shadow(0 0 20px var(--colorA));
        animation: rotate 3s infinite linear;
    }
    
    &::after {
        --colorA: #ffec41;
        animation-delay: -1.5s;
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
</style>